<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>家--引导</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/media.css">
    <script src="js/axios.min.js"></script>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app" class="all_container">
        <div class="home_bg"  :class="txShow?'home_bg2':''" >
            
        
            
            <div class="home_back flex cursor" @click="goback"><img src="image/back.png">Back</div>
            <div class="ty_btn flex" v-if="txShow" style="z-index:99">
                <div class="ty_btnl cursor" @click="gopge(1)"><img :src="currentImage"></div>
                <div class="ty_btnr cursor" @click="gopge(2)"><img :src="currentImage2"></div>
            </div>
            <!--引导消失之后投影点击-->
            <!--<div @click="got3" class="no_noticety cursor" :style="txNoticeShow || txNoticeShow2?'display:none;':'display:block;'">-->
            <!--    <div class="tree_tips clear">-->
            <!--        <img src="image/tx-border.png" class="ty_border cursor" @click.stop="goty">-->
            <!--    </div>-->
            <!--</div>-->
            <!-- 投影引导 -->
            <div class="touno">
                <img src="image/tou_no.png" style="width: 147px;height: 131px;z-index:2;position: absolute"  @click.stop="goty" v-if="!txNoticeShow && !touShow" @mouseover="touMouseover" @mouseleave="touMouseleave" >
                <img src="image/light.png" class="light" style="z-index:1"  v-if="txShow"  v-if="!txNoticeShow" >
                <img src="image/tou_shina.png" style="width: 147px;height: 131px;z-index:2;position: absolute;"  @click.stop="goty" v-if="touShow" @mouseover="touMouseover" @mouseleave="touMouseleave" >
            </div>
            
            
            <div class=" touno"  v-if="txNoticeShow" @click="hideTy">
                <div class="tree_tips clear" style="top:0;left:0">
                    <img src="image/tou_shina.png" style="width: 147px;height: 131px;z-index:2;position: absolute;"  @click.stop="goty">
                    <img src="image/hand.png" class="handimg" style="top:88px;left:-92px">
                    <div class="flex" style="top: 142px;position: absolute;left: -35px;">Click on the tree hole to see more features.</div>
                </div>
            </div>
            <div class="tree_tips clear" :class="txNoticeShow2?'home_tytips':''"  v-if="txNoticeShow2">
                <img src="image/tx-border.png" class="ty_border cursor" @click="goty2">
            </div>
            <!--书引导-->
            <div class="bookno">
                <img src="image/book_no.png" style="width: 160px;height: 135px;z-index:2;position: absolute"  @click.stop="platClick" v-if="!bookShow && !bookBoderShow" @mouseover="bookMouseover" @mouseleave="bookMouseleave" >
                <img src="image/book_shina.png" style="width: 160px;height: 135px;z-index:2;position: absolute;"  @click.stop="platClick" v-if="bookBoderShow" @mouseover="bookMouseover" @mouseleave="bookMouseleave" >
            </div>
            
            <div class="bookno"  v-if="bookShow" @click="hideBook">
                <div class="tree_tips clear tree_tips2" v-if="bookShow" style="left: 0!important;top: 109px!important;left: -50px!important;">
                    <img src="image/book_shina.png" class="book_border cursor" @click.stop="platClick" style="width: 160px;height: 135px;z-index:2;position: absolute;">
                    <img src="image/hand.png" class="handimg">
                    <div class="flex">Click on this book to see the tree planting results.</div>
                </div> 
            </div>
            
            <div class="audio_cont">
                <audio ref='audio' controlsList="nodownload noplaybackrate" currentTime="0" :hidden="true" volume="1" loop> 
                    <source :src="musicUrl" type="audio/mpeg">
                </audio>
            </div>
            <!-- 种树结果弹窗 -->
            <div class="planed_result"  v-if="planedShow">
                <div class="planed_wid">
                    <div class="planed_tit">I planted the tree</div>
                    <div class="planted_box">
                        <div class="planted_item" v-for="(pitem,pindex) in planedList" v-if="planedList.length>0">
                            <div class="item-t flex">
                                <div class="item-tl flex"> 
                                    <img src="image/planted.png" :src="pitem.moodType==0?'image/universe/green_tree4.png':pitem.moodType==1?'image/universe/green_tree4.png':pitem.moodType==2?'image/universe/blue_tree4.png':''"> 
                                    <span>{{pitem.moodType==0?'Rose':pitem.moodType==1?'Rainbow':pitem.moodType==2?'Raindrop':''}}  tree</span>
                                </div>
                                <div class="item-tr flex" @click.stop="doxl(pindex)"><span>{{pitem.plantingDateForShow}}</span><img src="image/xl.png" :class="pitem.xlShow?'xlimg':''"></div>
                            </div>
                            <div class="xl_box" v-if="pitem.xlShow">
                                <div class="xllist" v-for="(nitem,nindex) in pitem.notes">
                                    <div>{{nitem.content}}</div>
                                    <p>{{nitem.time}}</p>
                                </div>  
                            </div>
                        </div>
                        <div v-else>暂无数据</div>
                    </div>
                    <div class="planted_cancel cursor" @click.stop="planedShow=false"><img src="image/close.png"></div>
                </div>
            </div>
        </div>
        <div class="totast" v-if="messageShow"><div>{{message}}</div></div>
    </div>
    <script>
        new Vue({
            el: "#app",
            data: {
                messageShow:false,
                message:'',//提示信息
                planedShow:false, //种树结果弹出
                // xlShow:true, //下拉内容
                txNoticeShow:false, //投影引导
                bookShow:false, //书引导
                txShow:false, //投影内容
                txNoticeShow2:false,

                pageNo : 1,// 当前页码
                pageSize: 10, // 每页条数
                allpage:1,
                isLoading:false, //是否正在加载
                planedList:[],  //种树数据
                homeinfo:[],
                
                currentImage:'image/play.png',
                currentImage2:'image/play2.png',
                cplay1:true,
                cplay2:true,
                currtime:0,
                musicUrl:'image/su.mp3',
                intervalId:'',
                touShow:false,
                bookBoderShow:false,
            },
          
            created() {
                var that=this
                
                this.getHome()
                if(localStorage.getItem('token')){
                    //获取登录详情
                    if(!localStorage.getItem('userInfo')){
                        // this.getloginInfo()
                    }else{
                        let txNoticeShow =localStorage.getItem('txNotice')
                        let startmusic=localStorage.getItem('music');
                        // console.log('txNoticeShow',txNoticeShow)
                        if(!txNoticeShow){
                            that.txNoticeShow=true
                        }else{
                            let book =localStorage.getItem('book')
                            if(!book){
                                that.bookShow=true
                            }
                        }
                        if(startmusic){
                            this.txShow=true
                            this.currentImage2='image/pause2.png' 
                        }else{
                            this.txShow=false
                            this.currentImage2='image/play2.png'
                        }
                        
                    }
                }else{
                    window.location.href='index.html';
                }
                if(localStorage.getItem('musicTime')&&localStorage.getItem('music')!=''){
                    setTimeout(()=>{
                        this.cplay2=true
                        this.gopge(2)
                    },1000)
                }
                setTimeout(()=>{
                    if(localStorage.getItem('speakItem')&&localStorage.getItem('speakItem') == 1){
                        this.$refs.audio.volume = 1
                    }else{
                        this.$refs.audio.volume = 0
                    }
                },10)
            },
            methods:{
                
                touMouseover(){
                    this.touShow=true
                },
                touMouseleave(){
                    this.touShow=false
                },
                bookMouseover(){
                    this.bookBoderShow=true
                },
                bookMouseleave(){
                    this.bookBoderShow=false
                },
                
                goback(){
                    
                            window.location.href='index.html';
                    // window.history.go(-1);
                },
                hideTy(){
                    this.txNoticeShow=false
                    this.bookShow=true
                    if(!localStorage.getItem('txNotice')){
                        localStorage.setItem('txNotice',1)
                    }
                },
                hideBook(){
                    this.bookShow=false
                    if(!localStorage.getItem('book')){
                        localStorage.setItem('book',1)
                    }
                },
                gopge(type){
                    this.txShow=true
                    if(type==1){
                        
                        console.log(this.cplay1)
                        if(this.cplay1==true){
                           this.currentImage='image/pause.png'
                           //关闭music
                            localStorage.setItem('music','');
                            clearInterval(this.intervalId)
                            this.$refs.audio.pause()
                            this.currentImage2='image/play2.png'
                        }else{
                            this.currentImage='image/play.png'
                        }
                        this.cplay1=!this.cplay1
                        var fileUrl=this.homeinfo.ownedMeditationResList[0].url
                        if(fileUrl){
                            window.location.href=fileUrl;
                        }
                        // window.location.href='meditate.html';
                    }
                    if(type==2){
                        if(this.cplay2==true){
                            //设置music
                            if(localStorage.getItem('musicTime')&&localStorage.getItem('musicTime')>0){
                                this.currtime = localStorage.getItem('musicTime');
                            }
                            this.$refs.audio.currentTime = this.currtime
                            
                            localStorage.setItem('music',this.musicUrl);
                            this.$refs.audio.play()
                            this.$refs.audio.volume = 1
                            
                            localStorage.setItem('speakItem',1);
                            localStorage.setItem('musicTime',this.$refs.audio.currentTime);
                            this.intervalId = setInterval(()=>{
                                localStorage.setItem('musicTime',this.$refs.audio.currentTime);
                                
                            })
                            this.currentImage2='image/pause2.png' 
                            this.cplay1=false
                            this.currentImage='image/play.png'
                        }else{
                            //关闭music
                            localStorage.setItem('music','');
                            clearInterval(this.intervalId)
                            this.$refs.audio.pause()
                            this.currentImage2='image/play2.png'
                        }
                        this.cplay2=!this.cplay2
                         
                        var fileUrl2=this.homeinfo.ownedAnimationResList[0].url
                        if(fileUrl2){
                            this.musicUrl=fileUrl2
                            // window.location.href=fileUrl2;
                        }
                        // window.location.href='music.html?url='+this.homeinfo.url;
                    }
                },
                // 投影展示
                goty(){
                    if(this.txShow==true){
                        this.goty2()
                    }else{
                        this.txNoticeShow=false
                        this.txNoticeShow2=true
                        
                        this.txShow=true
                        if(!localStorage.getItem('txNotice')){
                            localStorage.setItem('txNotice',1)
                        }
                    }
                    
                },
                goty2(){
                    this.txNoticeShow2=false
                    this.txShow=false
                    if(!localStorage.getItem('book')){
                        this.bookShow=true
                    }
                    
                },
                got3(){
                    this.txShow=!this.txShow
                },
                // 种树结果展示
                platClick(){
                    if(!localStorage.getItem('book')){
                        localStorage.setItem('book',1)
                    }
                    this.planedShow=true
                    this.bookShow=false
                    this.getList()
                },
                platClick2(){
                    this.planedShow=true
                    this.getList()
                },
                doxl(index){
                    var that=this
                    let plant=that.planedList[index]
                    plant.xlShow=!plant.xlShow
                    Vue.set(that.planedList,index,plant);
                },
                getHome(){
                    let that=this
                    axios({
                        method: 'get',
                        url: baseUrl+'psychSocialServer/home/info',
                        // params: {
                        // },
                        headers: {
                            'Authorization': localStorage.getItem('token')
                        }
                    })
                    .then(response => {
                        if(response.data.code == 200){
                            this.homeinfo=response.data.data;
                            // this.messageShow=true
                            // this.message=response.data.message
                            
                        }else{
                            // this.messageShow=true
                            // this.message=response.data.message
                        }
                        setTimeout(()=>{
                            that.messageShow=false
                        },3000)
                    })
                    .catch(error => {
                        // 处理错误
                    });
                },
                getList(){
                    let that=this
                    axios({
                        method: 'get',
                        url: baseUrl+'psychSocialServer/home/getHarvestTreeList',
                        params: {
                            pageSize:that.pageSize,
                            pageNo:that.pageNo,
                        },
                        headers: {
                            'Authorization': localStorage.getItem('token')
                        }
                    })
                    .then(response => {
                        if(response.data.code == 200){
                            this.planedList=response.data.data.treeList
                            for(var x in this.planedList){
                                this.planedList[x].xlShow=false
                            }
                            var allpage=response.data.data.total;
                            that.allpage=allpage
                            }else{
                                this.messageShow=true
                                this.message=response.data.message
                                setTimeout(()=>{
                                    that.messageShow=false
                                },3000)
                            }
                        })
                    .catch(error => {
                    // 处理错误
                    });
                },
            }
        })
    </script>
</body>
</html>